const MINIO_BUCKET = 'http://192.168.88.77:9001/interview-bucket'
document.addEventListener('DOMContentLoaded', async () => {
    const userCard = document.getElementById('userCard');
    const avatar = document.getElementById('avatar');
    const username = document.getElementById('username');
    const nickName = document.getElementById('nickName');
    const phone = document.getElementById('phone');
    const email = document.getElementById('email');
    const jobInterest = document.getElementById('jobInterest');
    const techTackContainer = document.getElementById('techTackContainer');
    const createTime = document.getElementById('createTime');
    const logoutBtn = document.getElementById('logoutBtn');
    const editBtn = document.getElementById('editBtn');
    const gender = document.getElementById('gender');
    const age = document.getElementById('age');

    // 加载用户信息
    async function loadUserInfo() {
        try {
            // // 显示加载状态
            // userCard.innerHTML = `
            //     <div class="flex flex-col items-center py-10">
            //         <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
            //         <p class="text-neutral-500">正在加载用户信息...</p>
            //     </div>
            // `;

            const response = await fetch('/user/userInfo', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            const data = await response.json();
            if (data.code === 200) {
                const user = data.data;

                // 设置头像，使用公共图片服务作为默认
                avatar.src = MINIO_BUCKET + '/avatar/' + user.avatarUrl

                if (user.gender === 0) {
                    gender.textContent = '女';
                } else if (user.gender === 1) {
                    gender.textContent = '男';
                } else {
                    gender.textContent = '未知';
                }
                // 设置文本内容
                username.textContent = user.username;
                nickName.textContent = user.nickName;
                phone.textContent = user.phone;
                email.textContent = user.email;
                age.textContent = user.age;
                jobInterest.textContent = user.jobInterest;
                createTime.textContent = user.createTime;

                // 处理技术栈标签
                const techTags = user.techTack.split(',');
                techTackContainer.innerHTML = '';

                techTags.forEach(tag => {
                    const tagElement = document.createElement('span');
                    tagElement.className = 'badge bg-primary/10 text-primary';
                    tagElement.innerHTML = `<i class="fa fa-tag mr-1"></i> ${tag.trim()}`;
                    techTackContainer.appendChild(tagElement);
                });
            } else if (data.code === 401) {
                await Swal.fire({
                    icon: 'warning',
                    title: '登录状态失效',
                    text: '请重新登录以访问该页面',
                    confirmButtonText: '前往登录',
                    background: '#fef4f4',
                    iconColor: '#FF4444',
                    color: '#606266',
                });
                window.location.href = '/view/login.html';
            } else {
                userCard.innerHTML = `
                        <div class="flex flex-col items-center py-10">
                            <div class="w-16 h-16 rounded-full bg-danger/10 flex items-center justify-center mb-4">
                                <i class="fa fa-exclamation-triangle text-danger text-2xl"></i>
                            </div>
                            <p class="text-neutral-700">${data.message || '获取用户信息失败'}</p>
                            <button onclick="location.reload()" class="mt-4 bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-colors">
                                重试
                            </button>
                        </div>
                    `;
            }
        } catch (error) {
            console.error('加载用户信息失败:', error);
            userCard.innerHTML = `
                    <div class="flex flex-col items-center py-10">
                        <div class="w-16 h-16 rounded-full bg-neutral-200 flex items-center justify-center mb-4">
                            <i class="fa fa-wifi text-neutral-500 text-2xl"></i>
                        </div>
                        <p class="text-neutral-700">网络连接错误，请重试</p>
                        <button onclick="location.reload()" class="mt-4 bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-colors">
                            重试
                        </button>
                    </div>
                `;
        }
    }

    // 退出登录
    logoutBtn.addEventListener('click', async () => {
        const result = await Swal.fire({
            title: '确认退出',
            text: '你确定要退出当前账号吗？',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: '退出',
            cancelButtonText: '取消',
            background: '#fff',
            color: '#606266',
            confirmButtonColor: '#165DFF',
            cancelButtonColor: '#909399',
            customClass: {
                confirmButton: 'ml-2',
                cancelButton: 'mr-2'
            }
        });

        if (result.isConfirmed) {
            try {
                const response = await fetch('/user/logout', {
                    method: 'GET'
                });
                const logoutData = await response.json();
                if (logoutData.code === 200) {
                    Swal.fire({
                        icon: 'success',
                        title: '退出成功',
                        text: '已成功退出登录',
                        showConfirmButton: false,
                        timer: 1500,
                        background: '#f0f9eb',
                        iconColor: '#52c41a',
                        color: '#606266'
                    });
                    setTimeout(() => {
                        window.location.href = '/view/login.html';
                    }, 1500);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '退出失败',
                        text: logoutData.message || '退出操作失败',
                        background: '#fef0f0',
                        iconColor: '#ff4d4f',
                        color: '#606266'
                    });
                }
            } catch (error) {
                console.error('退出请求出错:', error);
                Swal.fire({
                    icon: 'error',
                    title: '网络错误',
                    text: '无法连接到服务器',
                    background: '#fef0f0',
                    iconColor: '#ff4d4f',
                    color: '#606266'
                });
            }
        }
    });

    // 编辑资料按钮
    editBtn.addEventListener('click', () => {
        // 跳转到编辑页面
        window.location.href = '/view/editUserInfo.html';

        // 这里应该跳转到编辑页面，暂时使用弹窗提示
        // Swal.fire({
        //     icon: 'info',
        //     title: '功能开发中',
        //     text: '编辑资料功能正在开发中，敬请期待！',
        //     background: '#f5f7fa',
        //     color: '#606266',
        //     confirmButtonColor: '#165DFF'
        // });
    });

    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
            header.classList.add('shadow-md');
            header.classList.add('py-2');
            header.classList.remove('py-3');
        } else {
            header.classList.remove('shadow-md');
            header.classList.add('py-3');
            header.classList.remove('py-2');
        }
    });

    // 初始加载
    loadUserInfo();
});